<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css"/>
    <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
    <script src="https://www.layuicdn.com/laydate-v5.3.1/laydate.js"></script>
</head>
<style>
    .div-content {
        border-radius: 5px;
        background-color: white;
        padding: 15px;
    }

    .table-search-fieldset {
        margin: 0;
        border: 1px solid #e6e6e6;
        padding: 10px 20px 5px 20px;
        color: #6b6b6b;
    }
</style>
<body>
<div class="div-content">
    <form class="layui-form layui-form-pane" id="form-search">
        <!--头部搜索条件-->
        <fieldset class="table-search-fieldset">
            <legend>搜索条件</legend>
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">地区名称</label>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" name="areaName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" id="date">
                    <label class="layui-form-label">时间范围</label>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" id="startDate" name="startDate" placeholder="开始日期" autocomplete="off"
                               class="layui-input">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" id="endDate" name="endDate" placeholder="结束日期" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="btn-search"  lay-submit lay-filter="btn-search-filter" type="button"
                            class="layui-btn layui-btn-radius layui-btn-normal">
                        <i class="layui-icon layui-icon-search"></i>查询
                    </button>
                </div>
                <div class="layui-inline">
                    <button id="btn-reset"  lay-submit lay-filter="btn-search-filter" type="reset"
                            class="layui-btn layui-btn-radius layui-btn">
                        <i class="layui-icon layui-icon-refresh-3"></i>重置条件
                    </button>
                </div>
            </div>
        </fieldset>
    </form>
    <table id="table-Inf" lay-filter="table-inf-filter" align="center"></table>
</div>
</body>
<!--操作 模板-->
<script type="text/html" id="col-inf-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--工具栏模板：-->
<script type="text/html" id="table-inf-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal" lay-event="add">
            <i class="layui-icon layui-icon-addition"></i>新增
        </button>
        <button class="layui-btn layui-btn-danger" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </div>
</script>
<script>
    /*刷新表格*/
    function refreshTable() {
        $("#btn-reset").click();
        $("#btn-search").click();
    }

    layui.use(['laydate', 'table', 'form'], function () {
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        //执行一个laydate实例
        laydate.render({
            elem: '#date' //指定元素
            ,type: 'datetime' //指定日期格式为 日月年 时分秒
            , range: ['#startDate','#endDate']
        });

        //员工列表表格渲染
        //第一个实例
        table.render({
            elem: '#table-Inf'
            , url: 'getAllInfo' //数据接口
            , page: true //开启分页
            , toolbar: "#table-inf-toolbar"
            , cols: [ [ //表头  两个中括号直接必须要有空格
                {type:"checkbox",width: 60},
                //sort 表示可以排序  fixed 表示固定列
                {field: 'id', title: '编号', width: 200, sort: true, align: "center"}
                , {field: 'areaName', title: '地区名', width: 250, align: "center"}
                , {field: 'infectedNum', title: '感染人数', width: 200, sort: true, align: "center"}
                , {field: 'entryTime', title: '时间', width: 250, sort: true, align: "center"}
                , {field: 'enteredBy', title: '录入人', width: 250, align: "center"}
                , {title: '操作', align: "center",toolbar:"#col-inf-toolbar"}
            ] ]
        });

        //监听表单提交
        form.on('submit(btn-search-filter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //刷新表格
            //上述方法等价于
            table.reload('table-Inf', {
                where: { //设定异步数据接口的额外参数，任意设
                    areaName: data.field.areaName
                    ,startDate: data.field.startDate
                    ,endDate: data.field.endDate
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //表格头部工具栏监听
        table.on('toolbar(table-inf-filter)', function(obj){
            if (obj.event == 'add'){
                layer.open({
                    type: 2,
                    title: "新增信息",
                    area: ['50%','80%'],
                    content: 'getAllAreaName' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            }else if (obj.event == 'delete'){
                var checkStatus = table.checkStatus('table-Inf'); //table-Inf 即为基础参数 id 对应的值
                //如果没有选中任何数据
                if (checkStatus.data.length == 0){
                    layer.alert('您没有选中任何数据', {icon:7,anim:6,title:"警告"});
                    return false;
                }
                /*判断是否删除*/
                layer.confirm("您确认删除选中记录？",{icon:3,title:"警告"},function (index) {
                    //选中的id
                    var idArray = new Array();
                    $(checkStatus.data).each(function () {
                        //选中所有数据  筛选出 id值
                        idArray.push(this.id);
                    });
                    //异步请求删除数据 、结果提示 、刷新表格   筛选出来的id值用逗号分割
                    var url = "del/" + idArray.join(",");
                    var params = {
                        _method:"DELETE"
                    }
                    $.post(url,params,function (response) {
                        if (response.code == 0){
                            //成功提示
                            layer.msg(response.message, {icon: 1});
                            //刷新表格
                            refreshTable();
                        }else {
                            layer.alert(response.message, {icon: 2,anim: 6});
                        }
                    });
                });
            }
        });
        //监听操作列
        table.on('tool(table-inf-filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent == 'del'){
                /*判断是否删除*/
                layer.confirm("您确认删除" + data.entryTime +"号的数据？",{icon:3,title:"警告"},function (index) {
                    //异步请求删除数据 、结果提示 、刷新表格   筛选出来的id值用逗号分割
                    var url = "del/" + data.id
                    var params = {
                        _method:"DELETE"
                    }
                    $.post(url,params,function (response) {
                        if (response.code == 0){
                            //成功提示
                            layer.msg(response.message, {icon: 1});
                            //刷新表格
                            refreshTable();
                        }else {
                            layer.alert(response.message, {icon: 2,anim: 6});
                        }
                    });
                });
            }else if (layEvent == 'edit'){
                //修改信息
                layer.open({
                    type: 2,
                    title: "修改信息",
                    area: ['50%','80%'],
                    content: 'update/'+data.id //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            }

        });
    });
</script>


</html>